<template>
<!-- ref是真是dom-->
  <div :class="['order-item-box', { 'order-item-box-expand': isShow}]" ref="orderItem">
      <!--  餐馆名称 -->
      <div class="order-title">
        <div class="titleText order-item-name" :title="item.restaurant.name[language]">
            {{item.restaurant.name[language]}}</div>
        <!--  订单时间 -->
        <div class="containerRowCenter subTitleText">{{item.createdAt | formatTime}}</div>
      </div>

      <!--  具体菜单的东西 orderItems组件； 父组件控制子组件的出现和隐藏，直接传值内容就可以动态绑定-->
      <div class="order-items">
            <orderItems v-for="(v,k) in cart" class="containerBetween vertical cart-item"
            :foodName="v[0].name[language]" :key='k' :price='v[0].price' :count='v.length'
            :isShow='!isShow' />
      </div>

      <!-- 总价的部分 -->
      <div class="order-footer">
          <div class="containerBetween containerCol">
              <div :class="['img-container','containerRowCenter', {'imgShow': !isShow}]">
                  <img src="@/assets/Assets/logo.png" alt="" class="img-style">
              </div>
              <div class="containerBetween order-total">
                  <div>{{$t('menu.total')}}</div>
                  <div>${{totalPrice}}</div>
              </div>

          </div>
          <div class="containerRowCenter more-btn">
              <button class="normal-btn cursor"
              @click="boxExpand">{{$t('order.more')}}</button>
          </div>
      </div>
    </div>
</template>

<script>
import _ from 'lodash';
import moment from 'moment';
import { mapState } from 'vuex';
import orderItems from '@/views/order/components/OrderItems.vue';

export default {
  components: { orderItems },
  data() {
    return {
      isShow: false,
    };
  },
  props: {
    item: {
      type: Object,
      default: () => ({}),
    },
  },

  filters: {
    formatTime(v) {
      return moment(v).format('YYYY-MM-DD HH:hh');
    },
  },

  computed: {
    ...mapState({
      language: (state) => state.language.language,
    }),
    cart() {
    //   console.log('cart ===>', this.item.cart); // 7个历史订单地cart元素
    //   console.log(_.groupBy(this.item.cart, '_id')); // 将cart里面的元素进行分组
      return _.groupBy(this.item.cart, '_id');
    },

    //* 计算总价
    totalPrice() {
      let sum = 0;
      this.item.cart.forEach((element) => {
        // console.log('price==>', element.price);
        sum += element.price;
      });
      return sum / 100;
    },

  },

  methods: {
    boxExpand() {
      this.$data.isShow = true;
      // console.log(this.$el);
      // console.log(this.$refs.orderItem);
      document.addEventListener('click', (e) => {
        // console.log('e.target.className', e.target.className);
        // if (e.target.className === 'normal-btn cursor') {
        //   console.log('in');
        //   this.$data.isShow = true;
        // }
        if (!this.$refs.orderItem.contains(e.target)) {
          this.$data.isShow = false;
        }
      });
    },
  },

};
</script>

<style>
.subTitleText{
    width : auto;
}

</style>
